<div class="container-fluid" id="cmis-container">
    <!--<div>amazing</div>-->
    <!--<div>test</div>-->
    <!--<div class="cloud-reading-share"></div>-->
    <div class="row status-container" ng-hide="progress==100">
        <!-- you can change top property to make it up or down in .init -->
	    <div class="init" ng-hide="serverError">
            <span>
                <i class="fa fa-spinner fa-pulse"></i> {{'loading' | translate }}
            </span>
        </div>
        <div class="server-error-container dis-table text-center" ng-show="serverError">
            <div class="dis-table-cell ver-middle">
                <img src="img/server-error.png" alt="">
                <h4 style="margin:10px 0 200px 0;">{{'server_error' | translate }}</h4>
            </div>
        </div>
    </div>

    <div class="row navbar-fixed-top cloud-reading-nav-shadow" undroppable ng-class="{'hide':progress!=100||fromFillAndSign!=''}" style="margin-right: 55px;">
        <div class=" ba-col-m sub-bg-color" ng-class="{'pluginList':pluginUi}">
            <bread-crumb class="breadcrumb sub-bg-color n-p" style="overflow: hidden;"
                         folder-tree="folderTree"
                         db-click="dbClick"
                         chosed-file-document="choseFile.isDocument()"
                         chose-file="choseFile"
                         current-folder="currentFolder"
            >
            </bread-crumb>
        </div>
    </div>
    
	<div ng-if="pluginUi != 'pluginList'" class="row navbar-fixed-top cloud-reading-nav-shadow" undroppable ng-class="{'hide':progress!=100||fromFillAndSign!=''}">
		<div class="col-xs-3 col-md-2">
			<div class="ba-col-l" ng-controller="DropdownNavbarCtrl">

                <style>
                    .nav-style{
                        padding-right: 0;
                        width: 100%;
                        height:66px !important;
                    }
                    .nav-style .buttons-left{
                        width:100%;
                        margin-top: 0px !important;
                    }
                    .nav-style.bar .buttons-left span{
                        margin-right:0;
                    }
                    .nav-style .left-buttons{
                        width:100%;
                        display: inline-block;
                        border-right:1px solid rgba(255,255,255,0.3);
                        margin-right: 5px;
                    }
                </style>
                <ion-nav-bar class="bar bar-clear nav-style" ng-if="device=='platform-pad'">
                    <ion-nav-buttons side="left">
                        <button class="button button-icon button-clear ion-navicon" style="line-height: 34px;height:34px;" menu-toggle="left"></button>
                        <span class="letter-space-2px hide-c1 long-words-handle"
                              style="line-height: 35px;height:34px;">{{:: translateTitle | translate }}</span>
                    </ion-nav-buttons>
                </ion-nav-bar>
            </div>
		</div>
        <div class="col-xs-9 col-md-10">
            <div class="col-lg-8" ng-class="{'col-md-8':device=='platform-pad','col-xs-12 col-md-8':device!='platform-pad'}">
                <div class="ba-col-m sub-bg-color">
                    <div class="pull-left">
                        <div class="pull-left" ng-show="searchResult.name">
                            <i ng-click="cancelSearch()" tooltip-placement="bottom" uib-tooltip="{{ 'back_to_pare_folder' | translate }}" class="fa fa-angle-left align-i" style="padding: 0 16px;font-size: 22px;"></i>
                            <span style="display: inline-block;line-height: 28px;height: 32px;vertical-align:middle;">{{ searchResult.name | translate }}</span>
                        </div>
                        <bread-crumb class="breadcrumb sub-bg-color n-p" style="overflow: hidden;"
                                     folder-tree="folderTree"
                                     db-click="dbClick"
                                     chosed-file-document="choseFile.isDocument()"
                                     chose-file="choseFile"
                                     current-folder="currentFolder"
                        >
                        </bread-crumb>
                    </div>
                    <!-- when choose a document this will show-->
                    <!--<div class="pull-right" ng-if="fileListShow">-->
                        <!--<ul class="list-inline n-m">-->
                            <!--&lt;!&ndash;<li ng-if="choseFile.allowableActions.canUpdateProperties">&ndash;&gt;-->
                                <!--&lt;!&ndash;<i class="fa fa-pencil fa-lg" title="{{'rename' | translate }}" ng-click="rename(choseFile)"></i>&ndash;&gt;-->
                            <!--&lt;!&ndash;</li>&ndash;&gt;-->
	                        <!--<li ng-if="choseFile.allowableActions.canGetContentStream">-->
		                        <!--<i class="fa fa-eye fa-lg" title="{{'preview' | translate }}" ng-click="preview(choseFile)"></i>-->
	                        <!--</li>-->
                            <!--<li ng-if="choseFile.allowableActions.canGetContentStream && supportFile">-->
                                <!--<i class="fa fa-download fa-lg" title="{{'download' | translate }}" ng-click="download(choseFile)"></i>-->
                            <!--</li>-->
	                        <!--<li ng-if="!choseFile.isDrm() && choseFile.allowableActions.canDeleteObject && supportFile">-->
		                        <!--<i class="fa fa-arrow-up fa-lg" title="{{'upload_new_version' | translate }}" ng-click="openModifyFilePicker(choseFile)"></i>-->
	                        <!--</li>-->
                            <!--<li ng-if="choseFile.allowableActions.canDeleteObject">-->
                                <!--<i class="fa fa-trash-o fa-lg" title="{{'delete' | translate }}" ng-click="delete(choseFile)"></i>-->
                            <!--</li>-->
                        <!--</ul>-->
                    <!--</div>-->
                    <!--<style>-->
                        <!--.recommend-phantom{-->
                            <!--position: absolute;-->
                            <!--right: 32px;-->
                            <!--top: 10px;-->
                        <!--}-->
                        <!--.btn-ghost{-->
                            <!--background: transparent;-->
                            <!--min-width: 103px;-->
                            <!--height: 28px;-->
                            <!--border: 1px solid #b3e5e8;-->
                            <!--font-size: 14px;-->
                            <!--color: #b3e5e8;-->
                            <!--padding: 2px;-->
                            <!--/* line-height: 30px; */-->
                        <!--}-->
                        <!--.btn-ghost a{-->
                            <!--color:#b3e5e8;-->
                        <!--}-->
                    <!--</style>-->
                    <!--<div class="recommend-phantom">-->
                        <!--<span class="btn btn-ghost">-->
                            <!--<a class="popup-left-border" href="https://www.foxitsoftware.com/pdf-editor/?fromcloudreading=up-pdf2word" target="_blank">{{'PDF2Word' | translate }}</a>-->
                        <!--</span>-->
                        <!--<span class="btn btn-ghost">-->
                            <!--<a class="popup-left-border" href="https://www.foxitsoftware.com/pdf-editor/?fromcloudreading=up-EditPDF" target="_blank">{{'edit' | translate }} {{ 'pdf' | translate }}</a>-->
                        <!--</span>-->
                        <!--<span class="btn btn-ghost">-->
                            <!--<a class="popup-left-border" href="https://www.foxitsoftware.com/pdf-editor/?fromcloudreading=up-OrganizePDF" target="_blank">{{'organize' | translate }} {{ 'pdf' | translate }}</a>-->
                        <!--</span>-->
                        <!--<span class="btn btn-ghost">-->
                            <!--<a class="popup-left-border" href="https://www.foxitsoftware.com/pdf-editor/?fromcloudreading=up-SignPDF" target="_blank">{{'sign' | translate }} {{ 'pdf' | translate }}</a>-->
                        <!--</span>-->
                    <!--</div>-->
                </div>
            </div>
            <div class="col-lg-4 bor-right" ng-class="{'col-md-4':device=='platform-pad','hidden-xs hidden-sm col-md-4':device!='platform-pad'}">
            <div class="ba-col-r text-right">
                <div ng-show="filePickerModal!='saveAs'" ng-include="templatePath + 'right-top-options.html'"></div>
                <div class="hide-platform-pad" ng-class="{'hide':device=='phantom-online'}" ng-include="templatePath + 'language-select.html'" ng-controller="LanguageCtrl"></div>
            </div>
        </div>
        </div>
	</div>
    <div class="row" ng-class="{'hide':progress!=100,'top-0':fromFillAndSign ,'top-60':!fromFillAndSign, 'top-00':pluginUi}">
        <div ng-if="pluginUi != 'pluginList'" class="nav-list col-xs-3 col-md-2" undroppable>
            <div class="panel-body" style="height: 100%">
                <div class="dropdown new-cho" ng-if="((currentFolder.allowableActions.canCreateDocument && supportFile) || currentFolder.allowableActions.canCreateFolder) && !currentFolder.isReadonly()">
                    <a ng-if="filePickerModal!='saveAs' && !fromFillAndSign" class="btn btn-create-fold m-bot10 dropdown-toggle"
                       data-toggle="dropdown" aria-haspopup="true">
	                    {{'new' | translate }}
                    </a>
                    <a ng-if="filePickerModal=='saveAs' && !fromFillAndSign" class="btn btn-create-fold m-bot10 dropdown-toggle" ng-click="createFolder()">
                        {{'create_folder' | translate }}
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                        <li ng-if="currentFolder.allowableActions.canCreateFolder">
                            <a ng-click="createFolder()" class="normal-wrap">
                                <i class="fa fa-folder-open"></i> {{'create_folder' | translate }}
                            </a>
                        </li>
                        <li ng-if="supportFile && currentFolder.allowableActions.canCreateDocument && currentFolder.allowableActions.canCreateFolder && filePickerModal!='saveAs'" class="divider"></li>
                        <li ng-if="supportFile && currentFolder.allowableActions.canCreateDocument && filePickerModal!='saveAs'">
                            <a ng-click="openUploadFilePicker(currentFolder)" class="normal-wrap">
                                <i class="fa fa-arrow-up"></i> {{'upload_file' | translate }}
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="tree tree-solid-line nav-stacked user-select-forbid" ng-class="{'top0':fromFillAndSign}">
                    <ion-content>
                        <!--<ion-refresher on-refresh="refreshCurFolderList()"></ion-refresher>-->
                    <div class="tree-folder" ng-repeat="folder in tree" ng-class="{'active':folder.id == currentFolder.id,'i-am-home':folder.isRoot()}">
                        <div class="tree-folder-header left-border-decorate" ng-style="{ 'padding-left' : depth*16+'px'}" ng-click="dbClick(folder)" droppable data-id="{{folder.id}}">
                            <div class="tree-folder-name" >
                            <span class="text-center folder-expand" style="position: absolute" ng-style="{'padding-left':depth*16-12+'px'}" ng-if="folder.folderList.length" ng-click="expandFolder(folder, $event)">
                                <i class="fa" ng-class="{'fa-caret-right':!folder.isExpand,'fa-caret-down':folder.isExpand}"></i>
                            </span>
                                <i class="fa" ng-class='{"fa-home fa-lg":folder.isRoot(), "fa-folder":!folder.isRoot() }'></i> {{folder.name}}
                            </div>
                        </div>
                        <div ng-show="folder.isExpand" class="tree-folder-content nav-stacked" ng-if="folder.folderList.length"
                             ng-include="templatePath + 'folder-tpl.html'" ng-init="depth=depth+1">
                        </div>
                    </div>
                    </ion-content>
                </div>
            </div>
        </div>
        <div class="files-mess-box" ng-class="{'col-xs-12':pluginUi ,'col-xs-9':!pluginUi, 'col-md-12':pluginUi ,'col-md-10':!pluginUi}">
            <div file-dropzone dropzone-hover-class='active' id="file-list" class="col-xs-12 bor-right user-select-forbid" ng-class="{'col-md-8':detailPanelIsShow && filePickerModal!='saveAs', 'col-md-12':!detailPanelIsShow || filePickerModal=='saveAs'}">
                <div ng-if="pluginUi != 'pluginList'" class="panel-heading" ng-include="templatePath + 'document-head-ctrl.html'" style="padding: 0 32px;height: 64px;"></div>
                <div ng-if="pluginUi == 'pluginList'" class="panel-heading pull-right" style="padding: auto;">
                    <i class="fa fa-refresh adjust-btn" ng-click="refreshCurFolderList()"></i>
                </div>
                <div class="spinner1 main-color" style="position: absolute;height:20px;top:0;right:0;left:0;bottom:0;display: inline-block" ng-if="currentFolder.children == null && currentFolder.loading ">
                    <span style="width:10px;height:10px;background:#00A8B3;" class="bounce1"></span>
                    <span style="width:10px;height:10px;background:#00A8B3;" class="bounce2"></span>
                    <span style="width:10px;height:10px;background:#00A8B3;" class="bounce3"></span>
                </div>
                <div class="spinner1" style="position: absolute;z-index:9999;height:20px;top:0;right:0;left:0;bottom:0;display: inline-block" ng-if="loadingSearchResult">
                    <span style="width:10px;height:10px;background:#00A8B3;" class="bounce1"></span>
                    <span style="width:10px;height:10px;background:#00A8B3;" class="bounce2"></span>
                    <span style="width:10px;height:10px;background:#00A8B3;" class="bounce3"></span>
                </div>
                <div class="dnd-text text-center search-without-result" ng-if="currentFolder.children == 0 && !loading && searchModeIsOn">
                    <div>
                        {{ 'no_result' | translate }}
                    </div>
                </div>
                <div class="dnd-text text-center"
                     ng-if="(currentFolder.children == 0 && !loading && !searchModeIsOn  && filePickerModal !='saveAs' && device !='platform-pad') && !currentFolder.isReadonly()">
                    <div>
                        <p>
                            {{ 'right_click_upload' | translate }}
                        </p>
                        <p>
                            {{ 'drag_to_upload' | translate }}
                        </p>
                    </div>
                </div>
                <div class="fil-box" context-menu context-menu-disabled="pluginUi == 'pluginList' || currentFolder.isReadonly()" data-target="menu-upload">
                    <div ng-show="trStyle" style="position: absolute;width: 100%;top: 8px;height: 32px;line-height: 32px;background: white;/* border-bottom: 1px solid #e5e8ef; */">
                        <table style="width:100%;">
                            <thead>
                                <tr>
                                    <th width="50%">{{'name' | translate }}</th>
                                    <th ng-if="pluginUi != 'pluginList'" width="20%">{{'owner' | translate }}</th>
                                    <th width="15%">{{'date' | translate }}</th>
                                    <th width="15%">{{'size' | translate }}</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                    <div class="fil-wrap absolute_full scroll_auto_y panel-body" ng-if="trStyle==true" selection-aera>
                        <ion-content>
                            <ion-refresher on-refresh="refreshCurFolderList()"></ion-refresher>
                            <table class="table table-hover" style="table-layout: fixed;" ng-if="currentFolder.children.length !=0">
                            <thead class="th-pd-0">
                            <tr>
                                <th width="50%"></th>
                                <th ng-if="pluginUi != 'pluginList'" width="20%"></th>
                                <th width="15%"></th>
	                            <th width="15%"></th>
                            </tr>
                            </thead>
                            <tbody id="class-list" class="user-select-forbid">
                            <!--all file will show ,file select func, right click menu func, -->
                            <tr context-menu context-menu-disabled="pluginUi == 'pluginList'" droppable
                                class="cur-p select-list"
                                data-id="{{ file.id }}"
                                data-target="menu-fold-{{ $index }}"
                                data-navbar="navbar-fixed-top"
                                ng-repeat="file in currentFolder.children | folder | orderBy:folderOrderBy"
                                ng-class="{'active':multipleChooseFilesId.indexOf(file.id)>-1 }"
                                ng-dblclick="device !='platform-pad' && dbClick(file)"
                                ng-mousedown="device !='platform-pad' && chooseFile(file,$event)"
                                ng-mouseup="fileMouseUp(file,$event)"
                                on-tap="chooseFile(file)"
                                on-double-tap="dbClick(file,$event)"
                                show-tooltip
                                ng-if="!(filePickerModal == 'saveAs' && file.isReadOnlyFolder())"
                            >
                                <td ng-hide="isEdit" class="tooltip-hint-parent max-width400" draggable>
                                    <i ng-show="file.isVersionSeriesCheckedOut" class="fa fa-link" style="margin-left: -17px;float: left;margin-top: 17px;"></i>
                                    <span class="long-words-handle" style="display:inline-block;line-height: 48px;width: 100%;vertical-align: middle;"
                                          uib-tooltip="{{file.name}}"
                                          tooltip-trigger="mouseenter"
                                          tooltip-animation="true"
                                          tooltip-placement="auto bottom"
                                          tooltip-class="hide-platform-pad"
                                    >
                                        <i class="fa" ng-class="{'fa-file-text-o':file.isDocument(), 'fa-folder': !file.isDocument()}"></i>
                                        <span class="tooltip-hint ">{{file.name}}</span>
                                    </span>

                                </td>

                                <td ng-if="pluginUi != 'pluginList'" class="long-words-handle">{{file.createdBy.getName()}}</td>
                                <td ng-if="lang!='DK'" class="long-words-handle" >{{file.lastModificationDate | date:'yyyy/MM/dd' }}</td>
                                <td ng-if="lang=='DK'" class="long-words-handle" >{{file.lastModificationDate | date:'dd,MMM,yyyy' | lowercase  }}</td>
                                <td class="long-words-handle">{{file.contentStreamLength | bytes}}
                                    <div ng-show="filePickerModal!='saveAs'" class="dropdown position-fixed"
                                         id="menu-fold-{{$index }}"
                                         ng-include="templatePath+'right-click-pop-up.html'"></div>
                                </td>
                            </tr>
                            <tr context-menu context-menu-disabled="pluginUi == 'pluginList'" droppable
                                class="cur-p select-list"
                                data-id="{{ file.id }}"
                                data-target="menu-doc-{{ $index }}"
                                data-navbar="navbar-fixed-top"
                                ng-repeat="file in currentFolder.children | document:fileType | orderBy:folderOrderBy"
                                ng-class="{'active':multipleChooseFilesId.indexOf(file.id)>-1 }"
                                ng-dblclick="device !='platform-pad' && click(file)"
                                ng-mousedown="device !='platform-pad' && click(file,$event)"
                                ng-mouseup="fileMouseUp(file,$event)"
                                on-tap="chooseFile(file)"
                                show-tooltip
                            >
                                <td ng-hide="isEdit" class="tooltip-hint-parent max-width400" draggable>
                                    <span class="share-icon-container" ng-show="file.description">
                                        <i class="fa fa-link"></i>
                                        <span class="cloud-reading-share" file="file" current-scope="this"></span>
                                    </span>

                                    <span class="long-words-handle" style="display:inline-block;line-height: 48px;width: 100%;vertical-align: middle;"
                                          uib-tooltip="{{file.name}}"
                                          tooltip-trigger="mouseenter"
                                          tooltip-animation="true"
                                          tooltip-placement="auto bottom"
                                          tooltip-class="hide-platform-pad"
                                          >
                                        <i class="fa" ng-class="{'fa-file-text-o':file.isDocument(), 'fa-folder': !file.isDocument()}"></i>
                                        <span class="tooltip-hint ">{{file.name}}</span>
                                    </span>

                                </td>
                                <td ng-if="pluginUi != 'pluginList'" class="long-words-handle">{{file.createdBy.getName()}}</td>
                                <td ng-if="lang !='DK'" class="long-words-handle">{{file.lastModificationDate | date:'yyyy/MM/dd' }}</td>
                                <td ng-if="lang =='DK'" class="long-words-handle">{{file.lastModificationDate | date:'dd,MMM,yyyy' | lowercase  }}</td>
                                <td class="long-words-handle">{{file.contentStreamLength | bytes}}
                                    <div ng-show="filePickerModal!='saveAs'" class="dropdown position-fixed" id="menu-doc-{{$index }}"
                                         ng-include="templatePath+'right-click-pop-up.html'"></div>
                                </td>
                            </tr>
                            </tbody>
                        </table>

                        </ion-content>
                    </div>
                    <div class="fil-wrap absolute_full scroll_auto_y panel-body" style="padding: 32px;padding-top: 0px;" ng-if="trStyle==false" selection-aera>
                        <ion-content>
                            <ion-refresher on-refresh="refreshCurFolderList()"></ion-refresher>
                            <div class="all-folder">
                                <!-- 注意这个里面的id 因为用的都是 file.id 如果 没有空格 因为id的唯一性 所以会报错 所以加上了空格  但是      -->
                                <!-- 这里有个非常有意思的差别   data.id={{file.id}} id={{file.id}}顺序不一样  会导致    chrome 和 fox浏览器 取值不一样 无论那种浏览器最终只能取一个值 要么 data.id有值  要么 id有值     -->
                                <div
                                        context-menu droppable
                                        class="cur-p select-list"
                                        data-id="{{ file.id}}"
                                        data-target="menu-folder-{{ $index }}"
                                        data-navbar="navbar-fixed-top"
                                        ng-repeat="file in currentFolder.children | folder | orderBy:folderOrderBy "
                                        ng-class="{'active':multipleChooseFilesId.indexOf(file.id)>-1 , 'check-out':file.isVersionSeriesCheckedOut}"
                                        ng-dblclick="dbClick(file)"
                                        dynamic-width
                                        ng-mousedown="chooseFile(file,$event)"
                                        ng-mouseup="fileMouseUp(file,$event)"
                                        show-tooltip
                                        ng-if="!(filePickerModal == 'saveAs' && file.isReadOnlyFolder())"
                                >
                                    <div class="folder-type" draggable>
                                        <div class="icon">
                                            <i class="fa fa-folder"></i>
                                        </div>
                                        <!--<div class="folder-name long-words-handle">-->
                                        <!--<span>{{file.name}}</span>-->
                                        <!--</div>-->
                                        <div class="tooltip-hint-parent folder-name"
                                             uib-tooltip="{{file.name}}"
                                             tooltip-trigger="mouseenter"
                                             tooltip-animation="true"
                                             tooltip-placement="auto bottom"
                                             tooltip-class="hide-platform-pad"
                                        >
                                            <span class="long-words-handle">
                                                <span class="tooltip-hint">{{file.name}}</span>
                                            </span>
                                        </div>
                                        <div class="dropdown position-fixed" id="menu-folder-{{ $index }}" ng-show="filePickerModal!='saveAs'" ng-include="templatePath+'right-click-pop-up.html'">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <hr>
                            <div class="all-document">
                                <div
                                        context-menu droppable
                                        class="cur-p select-list"
                                        data-id="{{file.id }}"
                                        data-target="menu-document-{{ $index }}"
                                        data-navbar="navbar-fixed-top"
                                        ng-repeat="file in currentFolder.children | document | orderBy:folderOrderBy"
                                        ng-class="{'active':multipleChooseFilesId.indexOf(file.id)>-1 , 'check-out':file.allowableActions.canCancelCheckOut}"
                                        ng-dblclick="dbClick(file)"
                                        dynamic-width
                                        ng-mousedown="chooseFile(file,$event)"
                                        ng-mouseup="fileMouseUp(file,$event)"
                                        show-tooltip
                                >
                                    <div class="document-type" draggable>
                                        <div data-id="{{file.id}}" class="document-thumnail" width-height-ratio lazy-load-img>

                                            <span class="check-out" ng-show="file.description">
                                                <i class="fa fa-link"></i>
                                                <span class="cloud-reading-share" file="file" currentScope="this"></span>
                                            </span>
                                            <!--<span class="check-out" ng-show="file.isVersionSeriesCheckedOut">-->
                                                <!--<i class="fa fa-lock"></i>-->
                                            <!--</span>-->
                                            <img src="" ng-if="file.thumbImg!=''">
                                            <div class="no-thumbnails" ng-if="file.thumbImg==''">
                                                <i class="fa fa-file-text-o"></i>
                                            </div>
                                            <!--<img ng-src="{{ thumbImg[file.id] }}" >-->
                                        </div>
                                        <div class="document-info">
                                            <div class="document-icon">
                                                <!-- change icon base on the type of file   ng-class="{'file-pdf-o':}"-->
                                                <i class="fa fa-file" ></i>
                                            </div>
                                            <div class="tooltip-hint-parent document-name"
                                                 uib-tooltip="{{file.name}}"
                                                 tooltip-trigger="mouseenter"
                                                 tooltip-animation="true"
                                                 tooltip-placement="auto bottom"
                                                 tooltip-class="hide-platform-pad"
                                            >
                                            <span class="long-words-handle">
                                                <span class="tooltip-hint">{{file.name}}</span>
                                            </span>
                                            </div>
                                            <!-- right click pop up-->
                                            <div class="dropdown position-fixed" id="menu-document-{{ $index }}" ng-show="filePickerModal!='saveAs'" ng-include="templatePath+'right-click-pop-up.html'">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </ion-content>
                    </div>
                    <!-- right click pop up-->
                    <style>
                        #menu-upload .dropdown-menu li a{
                            height:40px;
                            line-height:40px;
                        }
                    </style>
	                <div class="dropdown position-fixed" id="menu-upload" ng-show="filePickerModal!='saveAs'">
		                <ul class="dropdown-menu" role="menu" ng-if="(currentFolder.allowableActions.canCreateDocument && supportFile) || currentFolder.allowableActions.canCreateFolder">
                            <li ng-if="currentFolder.allowableActions.canCreateFolder">
                                <a ng-click="createFolder()">
                                    <i class="fa fa-folder-open"></i> {{'create_folder' | translate}}
                                </a>
                            </li>
                            <li class="divider" ng-if="(currentFolder.allowableActions.canCreateDocument && supportFile) && currentFolder.allowableActions.canCreateFolder"></li>
                            <li ng-if="currentFolder.allowableActions.canCreateDocument && supportFile">
                                <a ng-click="openUploadFilePicker(currentFolder)">
                                    <i class="fa fa-arrow-up"></i> {{'upload_file' | translate }}
                                </a>
                            </li>
		                </ul>
	                </div>
                </div>
            </div>
            <div id="file-detail" undroppable class="col-sm-12 col-md-4 file-detail" ng-style="{'width': smallScreen?'100%':''}" ng-class="{'hide':!detailPanelIsShow,'':detailPanelIsShow}" ng-if="detailPanelIsShow && filePickerModal!='saveAs'" ng-include="templatePath + 'file-detail.html'" ng-controller="FileDetailCtrl"></div>
        </div>
        <div style="visibility: hidden;">
            <input id="upload-file" name="file" type="file" onchange="angular.element(this).scope().upload(this.files)" multiple="true" />
            <input id="modify-file" name="file" type="file" onchange="angular.element(this).scope().modifyFile(this.files[0])" />

        </div>
    </div>
    <div class="preview-mask ng-hide" ng-show="isFullScreenPreview || iframePdf">
        <i class="fa fa-spinner fa-pulse" style="color:white;font-size:20px;height:20px;width:20px;position: absolute;left:0;right:0;bottom:0;top:0;margin:auto;"></i>
    </div>
    <div id="previewNav" ng-show="isFullScreenPreview">
        <a class="ctl-large pencil_24 webpdftool hide-a6" id="btnTextEdit" title="Edit Text" style="top:5px;left: 10px;position: absolute;cursor: pointer;"></a>
        <a class="ctl-large delete_24 webpdftool hide-a6" id="btnFormFieldDel" title="Delete Form Field" style="top:5px;left: 50px;position: absolute;cursor: pointer;"></a>
        <button type="button" class="btn btn-primary hide-a6" id="btnDownloadModifyDoc" style="top:3px;left: 100px;position: absolute;">Download Modified Doc</button>
        <i ng-show="isFullScreenPreview" class="fa fa-download fa-2x color-f close-file ioon-x pull-right" ng-click="download(choseFile)" id="download-icon" style="right: 70px;top: 13px;font-size: 18px;"></i>
        <i ng-show="isFullScreenPreview" class="fa fa-times fa-3x color-f close-file ioon-x ng-hide pull-right" ng-click="closePreview($event)"></i>
    </div>
    <!-- pdf 预览-->
    <style>
        .close-btn-container{
            position: fixed;background: #474747;
            top: 4px;
            right: 49px;
            border: 1px solid #474747;
            width: 30px;
            text-align: center;
        }
        .close-btn-container:hover{
            background-color: hsla(0,0%,0%,.12);
            background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
            background-clip: padding-box;
            border: 1px solid hsla(0,0%,0%,.35);
            border-color: hsla(0,0%,0%,.32) hsla(0,0%,0%,.38) hsla(0,0%,0%,.42);
            box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset, 0 0 1px hsla(0,0%,100%,.15) inset, 0 1px 0 hsla(0,0%,100%,.05);
            background: #474747;
        }
    </style>
    <div ng-show="isNormalFilePreview" style="position: fixed;top:0;width: 100%;z-index: 9999;left: 0;height: 100%;overflow-y:hidden ">
        <!--<div id="previewpdfNav" class="nav-for-preview">-->
            <!--<i title="{{ 'download' | translate }}"  class="fa fa-download fa-2x color-f close-file ioon-x pull-right download-btn" ng-click="download(choseFile)" id="download-icon" style="right: 0;position: relative;top: 15px;font-size: 18px;"></i>-->
        <div class="close-btn-container" style="">
            <i title="{{ 'close' | translate }}"  class="fa fa-times" ng-click="closePreview($event)" style="color: #ececec;font-size: 20px"></i>
        </div>
        <!--</div>-->
        <iframe name="previewFrame" ng-if="previewUrl" width="100%" height="100%"
                ng-src="{{previewUrl}}" allowtransparency="true"  title="Preview" frameborder="0"
                scrolling="no"></iframe>
    </div>
    <progress-bar-modal id="progress-bar-modal"></progress-bar-modal>
    <div id="previewPdf" ng-show="isFullScreenPreview">
        <div class="preview ng-hide" ng-show="isFullScreenPreview">
            <div ng-if="!choseFile.previewPdf">{{'loading' | translate }}</div>
            <span class="preview-span" ng-if="choseFile.imageSrc"><img ng-src="{{choseFile.imageSrc}}"/></span>
            <pre class="preview-content" ng-if="choseFile.previewText">{{choseFile.previewText}}</pre>
            <div id="docViewerContainer" ng-show="choseFile.previewPdf"></div>
        </div>
    </div>
</div>
